<!--  -->
<template>
    <div v-show="isShow">
        <el-dialog :title="dialogTitle" :visible.sync="editVisible" width="60%">
            <div class="tree-box flex">
                <div class="flex-left">
                    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
                </div>
                <div class="flex-right">
                    <el-table
                        :data="tableData"
                        border
                        ref="multipleTable"
                        @select="handleSelect"
                        @select-all="onSelectAll"
                    >
                        <el-table-column type="selection" width="60" align="center"></el-table-column>
                        <el-table-column prop="id" label="序号" type="index" align="center"></el-table-column>
                        <el-table-column prop="name" label="岗位"></el-table-column>
                        <el-table-column prop="departName" label="部门"></el-table-column>
                    </el-table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main.js';
var _ = require('lodash');
export default {
    props: {
        isShow: false,
        dialogTitle: ''
    },
    data() {
        return {
            editVisible: false,
            currentRow: '',
            //树数据
            data: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            //列表数据
            tableData: []
        };
    },
    methods: {
        // 勾选的时候来判断 让其变成单选
        handleSelect(val, row) {
            if (val.length > 1) {
                this.$refs.multipleTable.clearSelection(); // 清空所有选择
                val.shift();
                this.$refs.multipleTable.toggleRowSelection(row); //  选中当前选择
            }

            let selected = val.length && val.indexOf(row) !== -1;
            //console.log('handleSelect', selected); // true就是选中，0或者false是取消选中
            //console.log('handleSelect', row);
            if (selected) {
                this.currentRow = row;
            } else {
                this.currentRow = {};
            }
        },
        handleSearch() {
            // getTree()
        },
        // 获取树的数据
        getTree() {
            //发送请求获取树数据
            appMain
                .organizationList()
                .then(res => {
                    if (res.data.code === 20000) {
                        // this.tree = res.data;
                        //this.data = appMain.dealTree(res.data.data);
                        this.data = res.data.data;
                    } else {
                        this.$message.error('服务器繁忙，请稍后再试');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 树元素点击事件
        handleNodeClick(e) {
            this.tableDataIndex = '';
            console.log(e, 'treeItem');
            // 获取右下表格数据tableData
            this.tableData = e.jobs;
            for (const key in this.tableData) {
                this.tableData[key].departName = e.name;
                this.tableData[key].departId = e.id;
            }
        },
        onSelectAll() {
            this.$refs.multipleTable.clearSelection(); //这个是清除所有选择项，当选择全部时，清除所有选择项
            this.currentRow = {};
        },
        close() {
            this.$emit('close', {
                showDialog: false
            });
        },
        // 从弹窗返回主页面的数据
        saveEdit() {
            //let item = this.tableDataIndex === '' ? {} : this.tableData[this.tableDataIndex];
            this.$emit('edit', { backData: this.currentRow, showDialog: false });
        }
    },
    watch: {
        isShow: function(newVal, oldVal) {
            //console.log(newVal, 'newVal');
            if (newVal == true) {
                this.editVisible = true;
                this.getTree();
            } else {
                this.editVisible = false;
            }
        },
        editVisible: function(newVal) {
            this.$emit('close', {
                showDialog: newVal
            });
        }
    },
    computed: {},
    created() {}
};
</script>

<style lang="css" scoped>
.el-dialog__body {
    padding: 0 20px 30px;
}
.handle-input {
    width: 120px;
    display: inline-block;
}
.handle-select {
    width: 120px;
}
.tree-box {
    border: 1px solid #ddd;
    margin-top: 20px;
    min-height: 300px;
}
.flex-left {
    width: 200px;
    border-right: 1px solid #ddd;
}
.flex-right {
    flex: 1;
}
.el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden;
}
.el-tree > .el-tree-node {
    height: 300px;
    min-width: 100%;
    display: inline-block;
}
</style>